<script setup lang="ts">
import { usePrefix } from '@season-designable/vue';
import cls from 'classnames';
import { Icon } from '@iconify/vue';

const prefix = usePrefix('input-items-item');

const props = defineProps(['vertical', 'icon', 'title', 'tooltip']);
</script>

<template>
  <div
    :class="
      cls(prefix, {
        vertical: props.vertical,
      })
    "
  >
    <div v-if="props.icon" :class="prefix + '-icon'">
      <el-tooltip v-if="props.tooltip" :content="props.tooltip" placement="top">
        <Icon :icon="props.icon" style="font-size: 20px"></Icon>
      </el-tooltip>

      <Icon v-else :icon="props.icon" style="font-size: 20px"></Icon>
    </div>

    <div v-if="props.title" :class="prefix + '-title'">{{ props.title }}</div>
    <div :class="prefix + '-controller'"><slot></slot></div>
  </div>
</template>

<style lang="scss" scoped>
@import '../../../../styles.scss';

.dn-input-items {
  &-item {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom: 10px;
    color: $text-color;

    &-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 8px;
      flex-shrink: 0;
      flex-grow: 0;
      color: $text-color;
    }

    &-controller {
      min-width: 0;
      flex-shrink: 1;
      flex-grow: 1;

      .#{element-prefix}-radio-group {
        display: flex;

        .#{element-prefix}-radio-button-wrapper {
          flex-grow: 1;
          display: flex;
          justify-content: center;
        }
      }
    }
    &.vertical {
      flex-direction: column;
      align-items: flex-start;
      .dn-input-items-item-controller {
        width: 100%;
      }
    }
  }
}
</style>
